<template>
	<view class="content">
		<view class="post"></view>
		<view class="container">
			<view class="title">宁波经典三日游，穿梭在城市鱼渔港之间 的天空之境<text>（余姚+慈溪+中国渔村）</text></view>
			<view class="user-info">
				<view class="user-photo">
					<image src=""></image>
					<view>
						<text>官方小编</text>
						<text>发布于：2019.04.10</text>
					</view>
				</view>
				<view class="total-num">
					<view>
						<view><image src=""></image>45</view>
						<view><image src=""></image>45</view>
						<view><image src=""></image>45</view>
					</view>
					<text>浏览1.3万</text>
				</view>
			</view>
			<view class="introduce">宁波什么什么什么的，写一些介绍心得体验啥的。早在七千年前，宁波先民们就在这里繁衍生息，创造了灿烂的河姆渡文化。公元前2000多年的夏代，宁波的名称为“鄞”，
			春秋时为越国境地，秦时属会稽郡的治迁至三江口（今海曙区）</view>
			<view class="icon-group">
				<view>
					<image src=""></image>
					<text>2019.04.10</text>
				</view>
				<view>
					<image src=""></image>
					<text>3天</text>
				</view>
				<view>
					<image src=""></image>
					<text>¥1000/人</text>
				</view>
				<view>
					<image src=""></image>
					<text>家庭出游</text>
				</view>
			</view>
			<view class="article">
				<view class="date">Day.1</view>
				<view class="time">2019.04.10<text>周四</text></view>
				<view class="step">
					<text>第一站</text>
					<text>丹山赤水</text>
				</view>
				<view class="text-section">
					宁波怎么玩怎么玩，写一些游玩攻略游记。早在七千年前，宁波先民们就在这里繁衍生息，创造了灿烂的河姆渡文化。公元前2000多年的夏代宁波的名称为“鄞”，春秋时为越国境地，秦时属会稽郡的治迁至三江口（今海曙区)
				</view>
				<view class="post-card">
					<image src=""></image>
					<view class="main">
						<text class="name">四明湖红杉林</text>
						<view class="score">
							<text><i>4.5</i>分</text>
							<text>234条点评</text>
						</view>
						<view class="info">宁波沙发啥双方都委曲求全</view>
						<view class="tags">
							<text class="active">可定</text>
							<text>自然风光</text>
							<text>历史遗迹</text>
						</view>
					</view>
				</view>
				<view class="swiper-box">
					
				</view>
				<view class="info-list">
					<text>游玩时长：</text>
					<text>1.5小时</text>
				</view>
				<view class="info-list">
					<text>游玩tips：</text>
					<view>
						<text>开园时间：7：30-17:30 </text>
						<text>票价：120元/人 </text>
						<text>地址： </text>
					</view>
				</view>
				<view class="article-list">
					<text>交通推荐</text>
					<view>宁波怎么玩怎么玩，写一些游玩攻略游记。早在七千年前，宁波先民们就在这</view>
				</view>
				<view class="article-list last">
					<text>美食推荐</text>
					<view>宁波怎么玩怎么玩，写一些游玩攻略游记。早在七千年前，宁波先民们就在这里繁衍生息，创造了灿烂的河姆渡文化。公元前2000多年的夏代宁波的名称为“鄞”，春秋时为越国境地，秦时属会稽
					郡的治迁至三江口（今海曙区）</view>
				</view>
				<view class="swiper-box">
					
				</view>
				<view class="icon-count">
					<view><image src=""></image><text>可以加地址</text></view>
					<view>
						<view>
							<image src=""></image>
							<text>485</text>
						</view>
						<view>
							<image src=""></image>
							<text>485</text>
						</view>
					</view>
				</view>
				<view class="text-section">
					宁波怎么玩怎么玩，写一些游玩攻略游记。早在七千年前，宁波先民们就在这里繁衍生息，创造了灿烂的河姆渡文化。公元前2000多年的夏代宁波的名称为“鄞”，春秋时为越国境地，秦时属会稽郡的治迁至三江口（今海曙区)
				</view>
			</view>
		</view>
		<view class="nav-sliderbar" style="display: none;">
			<view class="main">
				<view class="item">
					<view class="type-name">
						<image src="../../static/img/icon1.png" class="icon"></image>
						<text>景点<i>（5）</i></text>
						<image src="../../static/img/narrow.png" class="narrow"></image>
					</view>
					<view class="list">
						<image src="" class="pic"></image>
						<view>
							<text class="name">宁波海洋世界</text>
							<view class="score">
								<text><i>4.5</i>分</text>
								<text>234条点评</text>
							</view>
							<image src="../../static/img/heart-icon.png" class="heart"></image>
						</view>
					</view>
					<view class="list">
						<image src="" class="pic"></image>
						<view>
							<text class="name">宁波海洋世界</text>
							<view class="score">
								<text><i>4.5</i>分</text>
								<text>234条点评</text>
							</view>
							<image src="../../static/img/heart-icon.png" class="heart"></image>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="type-name">
						<image src="../../static/img/icon1.png" class="icon"></image>
						<text>景点<i>（5）</i></text>
						<image src="../../static/img/narrow.png" class="narrow"></image>
					</view>
					<view class="list">
						<image src="" class="pic"></image>
						<view>
							<text class="name">宁波海洋世界</text>
							<view class="score">
								<text><i>4.5</i>分</text>
								<text>234条点评</text>
							</view>
							<image src="../../static/img/heart-icon.png" class="heart"></image>
						</view>
					</view>
					<view class="list">
						<image src="" class="pic"></image>
						<view>
							<text class="name">宁波海洋世界</text>
							<view class="score">
								<text><i>4.5</i>分</text>
								<text>234条点评</text>
							</view>
							<image src="../../static/img/heart-icon.png" class="heart"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask-menu">
			<view class="main">
				<view class="header">
					<text>宁波市</text>
					<text>南塘老街</text>
					<text>东钱湖</text>
					<text>小普陀</text>
					<image src="../../static/img/narrow2.png"></image>
				</view>
				<view class="list first">
					<text class="num">Day.1</text>
					<view>
						<text class="location">当前位置</text>
						<view>
							<text>第一站：丹山赤水</text>
							<text>丹山赤水/交通/美食</text>
						</view>
					</view>
					<view class="active">
						<text class="location">当前位置</text>
						<view>
							<text>第一站：丹山赤水</text>
							<text>丹山赤水/交通/美食</text>
						</view>
					</view>
					<view>
						<text class="location">当前位置</text>
						<view>
							<text>第一站：丹山赤水</text>
							<text>丹山赤水/交通/美食</text>
						</view>
					</view>
				</view>
				<view class="list">
					<text class="num">Day.1</text>
					<view>
						<text class="location">当前位置</text>
						<view>
							<text>第一站：丹山赤水</text>
							<text>丹山赤水/交通/美食</text>
						</view>
					</view>
					<view>
						<text class="location">当前位置</text>
						<view>
							<text>第一站：丹山赤水</text>
							<text>丹山赤水/交通/美食</text>
						</view>
					</view>
					<view>
						<text class="location">当前位置</text>
						<view>
							<text>第一站：丹山赤水</text>
							<text>丹山赤水/交通/美食</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.content{
		color: #323332;
		background: #f3f3f8;
		height: 100%;
		.post{
			width: 100%;
			height: 554upx;
		}
		.container{
			padding: 50upx 30upx 20upx;
			margin-bottom: 40upx;
			background: #fff;
			.title{
				color: #323332;
				font-size: 38upx;
				font-weight: bold;
				padding-bottom: 86upx;
				text{
					font-size: 30upx;
					font-weight: normal;
				}
			}
			.user-info{
				padding: 0 30upx;
				border-bottom: 1px solid rgba(177, 184, 188, .25);
				padding-bottom: 54upx;
				.user-photo{
					display: flex;
					align-items: center;
					image{
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						margin-right: 22upx;
						background: #999;
					}
					view{
						display: flex;
						flex-direction: column;
						font-size: 32upx;
						line-height: 32upx;
						text{
							&:last-of-type{
								color: #666;
								font-size: 22upx;
								line-height: 22upx;
								padding-top: 22upx;
							}
						}
					}
				}
				.total-num{
					display: flex;
					justify-content: space-between;
					font-size: 24upx;
					color: #999;
					margin-top: 40upx;
					view{
						display: flex;
						align-items: center;
						margin-right: 66upx;
						image{
							width: 28upx;
							height: 28upx;
							margin-right: 16upx;
						}
					}
				}
			}
			.introduce{
				font-size: 28upx;
				color: #A8A9AB;
				padding-left: 32upx;
				position: relative;
				margin: 38upx  0 54upx;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 2px;
					height: 100%;
					background: linear-gradient(to top,#0DDDF6,#1DEB96);
				}
			}
			.icon-group{
				display: flex;
				justify-content: space-around;
				margin-bottom: 80upx;
				image{
					width: 36upx;
					height: 36upx;
					margin-bottom: 20upx;
				}
				view{
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #666;
					font-weight: bold;
					font-size: 28upx;
					line-height: 28upx;
				}
			}
			.article{
				.date{
					font-size: 54upx;
					font-weight: bold;
					line-height: 54upx;
					text-align: center;
				}
				.time{
					color: #666;
					font-size: 20upx;
					text-align: center;
					padding-top: 14upx;
					line-height: 20upx;
					padding-bottom: 80upx;
					text{
						margin-left: 40upx;
					}
				}
				.step{
					display: flex;
					font-size: 36upx;
					font-weight: bold;
					line-height: 36upx;
					text{
						border-left: 2px solid #323332;
						padding-left: 14upx;
						margin-right: 14upx;
					}
				}
				.text-section{
					font-size: 30upx;
					line-height: 50upx;
					padding-top: 56upx;
				}
				.post-card{
					margin: 38upx 0 32upx;
					box-shadow: 0 0 8upx rgba(191, 191, 218, 0.5);
					border-radius: 10upx;
					padding: 26upx;
					display: flex;
					image{
						width: 176upx;
						height: 170upx;
						margin-right: 48upx;
						background: #999;
					}
					.main{
						display: flex;
						flex-direction: column;
						.name{
							font-size: 36upx;
							line-height: 36upx;
						}
						.score{
							display: flex;
							font-size: 24upx;
							align-items: center;
							line-height: 28upx;
							padding: 16upx 0 20upx;
							i{
								color: #FF7E3C;
								font-size: 28upx;
								font-style: normal;
								margin-right: 4upx;
							}
							text{
								&:first-of-type{
									margin-right: 8upx;
								}
								&:last-of-type{
									padding-left: 8upx;
									line-height: 24upx;
									border-left: 1px  solid #323332;
								}
							}
						}
						.info{
							display: flex;
							font-size: 22upx;
							line-height: 22upx;
						}
						.tags{
							padding-top: 20upx;
							font-size: 20upx;
							display: flex;
							text{
								color: #FF7221;
								padding: 0 10upx;
								border-radius: 4upx;
								margin-right: 20upx;
								border: 1px solid #FF7221;
							}
							.active{
								color: #fff;
								background: linear-gradient(to left,#FBAB66,#F7418C);
								border: none;
							}
						}
					}
				}
				.swiper-box{
					height: 414upx;
					margin-bottom: 30upx;
				}
				.info-list{
					display: flex;
					font-size: 26upx;
					margin-bottom: 38upx;
					>text{
						&:first-of-type{
							font-size: 24upx;
							color: #666;
						}
					}
					view{
						display: flex;
						flex-direction: column;
						text{
							padding-bottom: 16upx;
						}
					}
				}
				.article-list{
					margin-bottom: 50upx;
					text{
						font-size: 34upx;
						line-height: 34upx;
						display: block;
						padding-bottom: 40upx;
					}
					view{
						font-size: 30upx;
						line-height: 50upx;
					}
				}
				.last{
					margin-bottom: 0;
				}
				.icon-count{
					display: flex;
					justify-content: space-between;
					font-size: 28upx;
					align-items: center;
					image{
						width: 28upx;
						height: 28upx;
						margin-right: 12upx;
					}
					view{
						display: flex;
						view{
							margin-right: 20upx;
							text{
								font-size: 24upx;
							}
							&:last-of-type{
								margin-right: 0;
							}
						}
					}
				}
			}
		}
		.nav-sliderbar{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.5);
			position: fixed;
			top: 0;
			left: 0;
			.main{
				width: 580upx;
				height: 100%;
				background: #fff;
				right: 0;
				top: 0;
				position: absolute;
				.type-name{
					height: 76upx;
					width:100%;
					background: linear-gradient(to left,rgba(29, 235, 150, .1),rgba(13, 221, 246, .1));
					color: #15BD97;
					font-size: 32upx;
					display: flex;
					align-items: center;
					font-weight: bold;
					padding-right: 32upx;
					i{
						font-weight: normal;
						font-style: normal;
					}
					text{
						margin-right: auto;
					}
					.icon{
						width: 48upx;
						height: 48upx;
						flex-shrink: 0;
						margin-right: 14upx;
						margin-left: 24upx;
					}
					.narrow{
						width: 22upx;
						height: 12upx;
					}
				}
				.list{
					display: flex;
					padding: 32upx 0 0 24upx;
					&:last-of-type{
						&>view{
							border-bottom: none;
						}
					}
					.pic{
						height: 130upx;
						width: 130upx;
						margin-right: 22upx;
						background: #999;
						border-radius: 10upx;
						flex-shrink: 0;
					}
					.heart{
						width: 42upx;
						height: 38upx;
						position: absolute;
						right: 30upx;
						bottom: 68upx;
					}
					.name{
						font-size: 30upx;
						line-height: 30upx;
						font-weight: bold;
						padding: 20upx 0;
					}
					&>view{
						flex: 1;
						border-bottom: 1px solid rgba(177, 184, 188, .25);
						display: flex;
						flex-direction: column;
						padding-bottom: 64upx;
						position: relative;
					}
					.score{
						display: flex;
						font-size: 24upx;
						align-items: center;
						line-height: 28upx;
						i{
							color: #FF7E3C;
							font-size: 28upx;
							font-style: normal;
							margin-right: 4upx;
						}
						text{
							&:first-of-type{
								margin-right: 8upx;
							}
							&:last-of-type{
								padding-left: 8upx;
								line-height: 24upx;
								border-left: 1px  solid #323332;
							}
						}
					}
				}
			}
		}
		.mask-menu{
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.5);
			top: 0;
			left: 0;
			position: absolute;
			.main{
				background: #fff;
				border-bottom-left-radius: 26upx;
				border-bottom-right-radius: 26upx;
			}
			.header{
				width: 100%;
				height: 40upx;
				background: linear-gradient(to left,rgba(13, 221, 246, .1),rgba(29, 235, 150, .1));
				font-size: 24upx;
				color: #15BD97;
				text-align: center;
				line-height: 40upx;
				position: relative;
				image{
					position: absolute;
					width: 16upx;
					height: 12upx;
					right: 30upx;
					top: 14upx;
				}
				text{
					:after{
						content: '>';
						margin: 0 10upx;
					}
				}
			}
			.first{
				padding-top: 46upx;
			}
			.list{
				text-align: right;
				padding-bottom: 46upx;
				.num{
					font-size: 38upx;
					font-weight: bold;
					line-height: 38upx;
					padding-right: 60upx;
				}
				.location{
					padding-left: 24upx;
					opacity: 0;
				}
				&>view{
					height: 120upx;
					display: flex;
					font-size: 20upx;
					line-height: 20upx;
					justify-content: space-between;
					padding-right: 60upx;
					align-items: center;
					view{
						display: flex;
						flex-direction: column;
						justify-content: center;
						text{
							&:first-of-type{
								font-size: 32upx;
								font-weight: bold;
								line-height: 32upx;
								padding-bottom: 16upx;
							}
						}
					}
				}
				.active{
					background: linear-gradient(to left,rgba(29, 235, 150, .1),rgba(13, 221, 246, .01));
					.location{
						opacity: 1;
					}
				}
			}
		}
	}
</style>
